<template>
  <el-dialog
    :title="dialog.title"
    :visible.sync="dialog.show"
    :before-close="beforeClose"
    :close-on-click-modal="true"
    class="photo-edit-dialog"
  >

    <div class="dialog-section">
      <el-upload
        class="avatar-uploader"
        :action="uploadHost+'/fileUpload/upload?fileType=UserHeadPic'"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :on-progress="onProgress"
        :on-error="onError"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="图片加载失败">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <p>上传新头像</p>
      <p class="tip" style="line-height: 15px;" v-text="tipText"></p>
    </div>
    <div slot="footer">
      <el-button type="default" @click="close">取 消</el-button>
      <!--<el-button type="danger" @click="resetForm">重 置</el-button>-->
      <el-button
        type="success"
        @click="uploadPhoto"
        :loading="changeLoading" :disabled="imageUrl === ''">上 传</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import userAPI from '@/api/system/user'
  import {mapGetters} from 'vuex'
  export default {
    name: 'PhotoEditDialog',
    data() {
      return {
        dialog:{
          title:'修改头像',
          show:false
        },
        photo:{
          fileId: "",
          fileName: "",
          fileUrl: "",
          webFilePath: ""
        },
        imageUrl:'',
        changeLoading:false,
        userId:'',
        tipText:''
      }
    },
    created() {

    },
    computed:{
      ...mapGetters([
        'uploadHost'
      ])
    },
    methods: {
      beforeClose(done){
        done(true)
      },
      open(id){
        this.photo = {}
        this.imageUrl = ''
        this.userId = id
        this.dialog.show = true
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = res.result.webFilePath
        this.photo = res.result
      },
      beforeAvatarUpload(file) {
        // const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2

        /*        if (!isJPG) {
                  this.$message.error('上传头像图片只能是 JPG 格式!');
                }*/
        if (!isLt2M) {
          this.$message.info('上传头像图片大小不能超过 2MB!')
        }
        return isLt2M
      },
      uploadPhoto(){
        if(this.changeLoading && this.imageUrl === ''){
          return
        }

        this.changeLoading = true
        userAPI.editUserPhoto(this.userId,this.photo).then(res=>{
          this.changeLoading = false
          this.$message.success('修改头像成功')
          this.dialog.show = false
          this.$emit('update')
        })
      },
      close(){
        this.dialog.show = false
      },
      onProgress(e){
        console.log(e.percent)
        this.tipText = '上传中……'+e.percent+'%'
      },
      onError(){
        this.$message.error('文件上传失败，请重试')
      }
    }
  }
</script>

<style scoped lang="scss">

  .dialog-section {
    text-align: center;
    p {
      line-height: 40px;
      font-size: 13px;
      color:gray;
    }
  }
  .tip {
   line-height: 10px;
  }

</style>
